<template>
  <div class="common-card bg-white">
    <dc-cell class="main-title" title="员工情况" value="详情" sVal="true" :to="'/employe'" isLink></dc-cell>
    <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
      <dc-col class="card-data" span="7">
        <span class="num">{{empOverview.employees}}</span>
        <span class="label">员工总数</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <span class="num">{{empOverview.empPerformance}}</span>
        <span class="label">人效</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <span class="num">{{empOverview.empPerformancePeak}}</span>
        <span class="label">高峰段人效</span>
      </dc-col>
    </dc-row>
    <div class="sub-title">明星员工</div>
    <div v-if="!famousEmp || famousEmp&&famousEmp.length==0" class="nodata">暂无数据</div>
    <dc-row type="flex" justify="space-around" align="middle" class="star" v-for="(emp, index) in famousEmp"
            :key="emp.empName">
      <dc-col span="8" class="aln-center flex startDetail">
        <span style="position: relative">
          <img class="person-img mr12" style="display: inline-block;" alt=""
               :src="emp.empImage || 'static/icon-user-role.png'"/>
          <em class="crown" :style="'background-image: url(static/top' + (index+1) + '.png)'"></em>
        </span>
        <span class="num">{{emp.empName}}</span>
      </dc-col>
      <dc-col span="8" class="startDetail">
        <div class="bar-out">
          <div class="bar-in" :style="{width:emp.empTurnoverRatio}"></div>
        </div>
      </dc-col>
      <dc-col span="6" class="startDetail">
        <span class="num">{{emp.empAmount}}元</span>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  import api from '@/common/api/employe';
  import rankApi from '@/common/api/rankList';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  export default {
    data () {
      return {
        data: {timeFlag: -1},
        famousEmp: [{empImage: '', empName: '暂无', empTurnoverRatio: '0', empAmount: '0'}],
        empOverview: {
          employees: 0,
          empPerformance: 0,
          empPerformancePeak: 0
        }
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    methods: {
      _getOverview (data) {
        api.getOverview(data)
          .then(res => {
            if (res.length > 0) {
              this.empOverview = res[0];
            }
          });
      },
      _getEmpEarnRanking (data) {
        rankApi.getEmpEarnRanking(data)
          .then(res => {
            if (res.length > 3) {
              this.famousEmp = res.slice(0, 3);
            } else {
              this.famousEmp = res;
            }
          });
      }
    },
    activated () {
      this._getOverview(this.data);
      this._getEmpEarnRanking(this.data);
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .crown {
    position: absolute;
    top: -12px;
    right: -6px;
    height: 24px;
    width: 24px;
    background-size: 100%;
  }
  .star {
    .startDetail {
      padding-top: px2rem(20px);
      padding-bottom: px2rem(20px);
    }
    .person-img {
      width: px2rem(86px);
      height: px2rem(86px);
      border-radius: 50%;
    }
    .bar-out {
      width: 100%;
      height: px2rem(20px);
      background: #edeef2;
      .bar-in {
        height: px2rem(20px);
        background: #e8cb44;
      }
    }
    .flex {
      display: flex;
    }
    .num {
      font-size: px2rem(32px);
      color: #333;
    }
    .aln-center {
      align-items: center;
    }
    .mr12 {
      margin-right: px2rem(12px);
    }
  }
</style>
